import React, { useState, useEffect } from "react";

import type { ColumnsType } from "antd/es/table";

import {
  FileSearchOutlined,
  StarOutlined,
  DeleteOutlined,
} from "@ant-design/icons";
import {notification} from "antd"
import "./index.scss";
import Table from "antd/es/table";
import * as service from "../../../../api/cgg/index";
interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
  pro: any;
}



// var  handelete = async()=>{
//   var res = await service.deleteProduct({pid:2})
//   console.log(res);
// }
const FocusTs = () => {
  const columns: ColumnsType<DataType> = [
    {
      title: "图片",
      // dataIndex: "img",
      render: (records) => (
        <img
          src={records.productPic}
          alt=""
          width={70}
        />
      ),
    },
    {
      title: "名称",
      dataIndex: "name",
    },
    {
      title: "产品线",
      dataIndex: "productName",
    },
    {
      title: "品类",
      dataIndex: "productType",
    },
    {
      title: "创建时间",
      dataIndex: "productCreattime",
    },
    {
      title: "状态",
      dataIndex: "flag",
      render: (productState) => (
        <span className="state">
          {" "}
          <span className={`zt ${productState == 0 ? "" : "active"}`}>·</span>
          状态
        </span>
      ),
    },
    {
      title: "详情",
      dataIndex: "xq",
      render: () => (
        <FileSearchOutlined style={{ color: "orange", fontSize: "25px" }} />
      ),
    },
    {
      title: "收藏",
      dataIndex: "bj",
      render: () => <StarOutlined style={{ color: "green", fontSize: "25px" }} />,
    },
    {
      title: "删除",
      dataIndex: "sj",
      render: (_:any,record:any) => <DeleteOutlined  onClick={() => flag(record.productId)} style={{ color: "red", fontSize: "25px" }} />,
    },
  ];
  var [data, setFouData] = useState([]);
  useEffect(() => {
    var query = async () => {
      var res = await service.findProductByAttention({
        page: 1,
        limit: 100,
        attention: 1,
      });
      res.data.data.records.forEach((item: any, index: any) => {
        item.key = index;
      });
      setFouData(res.data.data.records);
    };
    query();
  }, []);
  var flag =async (productId:any) => {
    console.log(productId);
    
      var res =await service.deleteProduct({pid:productId})
      if(res.data.code==200){
        var newData = JSON.parse(JSON.stringify(data));
        var i:any = newData.findIndex((item:any)=>item.productId==productId)
        if(i !=-1){
          newData.splice(i,1)
          setFouData(newData);
        }
        notification.success({message:'删除成功'})
  
      }else{
        notification.error({message:'删除失败'})
  
      }
  };
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
  console.log("selectedRowKeys changed: ", newSelectedRowKeys);
  setSelectedRowKeys(newSelectedRowKeys);
};

const rowSelection = {
  selectedRowKeys,
  onChange: onSelectChange,
};
  return (
    <div>
      <Table rowSelection={rowSelection} columns={columns} dataSource={data} />
    </div>
  );
};

export default FocusTs;
